<template>
  <div>
    <BasicForm @register="register" />
  </div>
</template>

<script setup lang="ts">
  import {
    markRaw,
    //ref
  } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';

  import { formSchema, restData } from './quality.data';
  import { AddTaskList, GetCaliberByApplyId } from '/@/api/admin/dept';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { cloneDeep } from 'lodash-es';

  import dayjs from 'dayjs';
  restData();

  const emit = defineEmits(['register', 'success']);

  const props = defineProps({
    closeModal: {
      type: Function,
      default: () => {},
    },

    setModalProps: {
      type: Function,
      default: () => {},
    },
    record: {
      type: Object,
      default: () => {},
    },
  });

  props.setModalProps({
    confirmLoading: false,
    loading: false,
  });

  const { createMessage } = useMessage();

  const [register, { validate, setFieldsValue }] = useForm({
    labelWidth: 120,
    baseColProps: {
      span: 12,
    },
    rulesMessageJoinLabel: true,
    schemas: formSchema(),

    showActionButtonGroup: false,
  });
  // 获取口径
  const getCaliberByApplyId = async () => {
    const id = props?.record?.apply_id;
    const ret = await GetCaliberByApplyId(id);
    console.log(ret);
    setFieldsValue({
      caliberId: ret.caliberId,
    });
  };
  getCaliberByApplyId();

  // 提交按钮触发逻辑
  const submit = async (formData) => {
    const { apply_id } = props?.record;
    let values = cloneDeep(formData);
    values.startTime = values.startTime && dayjs(markRaw(values.startTime)).format('YYYY-MM-DD');
    values.endTime = values.endTime && dayjs(markRaw(values.endTime)).format('YYYY-MM-DD');

    values.apples = [
      {
        applyId: apply_id,
      },
    ];
    delete values.name;

    try {
      let { code } = await AddTaskList(values);
      if (!code) {
        emit('success');
        createMessage.success('操作成功');
        props.closeModal();
      }
    } catch (e) {
      throw e;
    } finally {
      props.setModalProps({
        confirmLoading: false,
      });
    }
  };
  // modal弹窗props设置
  // const modalParams = {
  //   showCancelBtn: false,
  // };

  emit('register', { validate, submit });
</script>

<style lang="less" scoped>
  :deep(.ant-picker) {
    width: 100%;
  }

  .nav-title {
    display: flex;
    justify-content: space-between;
    width: 100%;

    span {
      &:first-child {
        flex: 2;
      }

      &:last-child {
        flex: 3;
        text-align: right;
      }
    }
  }
</style>
